/*Menubar styling*/
ul#blue { margin:0; padding:0; list-style-type:none; float:left; width:80%; }
ul#blue form { position:relative; float:right; border-top:2px solid #ccffff; margin-right: 0px; margin-left: 0px; margin-bottom: 10px; padding-top: 5px;}
ul#blue .current { border-top:2px solid #3d496a;}
ul#blue form:hover { border-top:2px solid #3d496a; }
ul#blue form a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}
ul#blue form a:hover { color:#8895b8; border:none; }
ul#blue form span{ display:none; position:absolute; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif; line-height: 15px; }
ul#blue form a:hover span {margin-top: 7px; display:block; color: #8895b8;}
ul#blue input { background-color: #ccffff;}

/*use custom font*/
@font-face {
    font-family: cool;
    src: url('coolvetica.ttf');
}

/*For profile pic*/
.profilePic {
    float: left;
    width: 320px;
}
.profilePic img {
    height: 220px;
    width: 300px;
}

/*For the greeting*/
#greeting {
    float: left;
    width: 180px;
    font-size: 12px;
}

/*To float buttons to the right of greeting*/
#addButtonsRight {
    clear: none;
    float: right;
}

/*To style the buttons right of greeting*/
.submitBig input {
    color: #0066cc;
    font-weight: bold;
    font-size: 19px;
    background: #ccffff;
    border: 1px outset #0066cc;
    font-family: cool;
}

/*Styles the upload image box*/
#addImg {
    margin-left: 320px;
    clear: none;
}

/*Styles the general layout*/
#wrapper {
    width:720px;
    margin:0 auto;
    text-align:center;
    color: #ccffff;
}

/*Styles the body*/
body {
    background: #003366;
    line-height:1;
    font-size: 12px;
    font-family:arial,sans-serif;
    margin:0pt;
    height:100%;

    font-family: handsean;
}

/*style the form e.g. sign in, register*/
#formwrapper {
    text-align:center;
    width: 380px;
    margin: 0 auto;
}

label {
    width: 4em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block;
}

input {
    color: #0066cc;
    background: #ffffff;
    border: 1px solid #0066cc;
    font-family: handsean;
}

/*colours the font blue and makes it bold
this font is found in the recent activity area*/
#submitp{
    color: #0066cc;
    font-weight: bold;
}

.submit input {
    color: #0066cc;
    font-weight: bold;
    font-size: 12px;
    background: #ccffff;
    border: 2px outset #0066cc;
}

fieldset {
    border: 1px solid #0066cc;
    width: 30em;
    background: #ccffff;
}

legend {
    color: #0066cc;
    background: #ccffff;
    font-size: 15px;
    font-weight: bold;
    border: 1px solid #0066cc;
    padding: 2px 6px;
}
/*end form styling*/

/*To curve boxes which hold images*/
.curved-box {
    margin: 10px;
    width: 225px;
    background-color: #ccffff;
}

.curved-box h2 {
    background: #003366 url(../styling/curveTop.png) no-repeat left top;
    color: #0066cc;
    padding: 10px 15px 0px 15px;
}

.curved-box h4 {
    background: #003366 url(../styling/curveBottom.png) no-repeat left bottom;
    margin: 0px;
    padding: 5px 15px 10px 15px;
    text-align: left;
}


.curved-box input {
    margin-top: 5px;
    padding: 5px 5px 5px 5px;
}
/*end curved-box styling*/


/*To position recent activities boxes
and profile page boxes into 3 columns*/
#innersidebar {
    float: left;
    width: 50%;
}

#innercontainer {
    float: left;
    width: 66%;
}

#content {
    float: right;
    width: 50%;
}

#sidebar {
    width: 34%;
    margin-left: 66%;
    margin-top: 28px;
}

#sidebar2 {
    width: 34%;
    margin-left: 66%;
    margin-top: 14px;
}
/*end positioning of recent activities boxes*/

/*To float buttons near the greeting message*/
#addTagsLeft {
    clear: none;
    float: left;
}

/*To align image metadata*/
#imgMetaData{
    text-align: center;
    color: #0066cc;
}

/*Put the content in the page's centre. e.g. used for
centering curved boxes in ListNonFriends.jsp*/
#contentCentre {
    float: right;
    width: 67%;
}

/*To position the header of all pages*/
#clrBoth{
    clear: both;
}